<template>
  <div class="hello">
    <h1 id="h1">在HTML中使用效果</h1>
    <div class="iframe_box">
      <iframe v-if="num=='3'" id="test" ref="html_test" src="/test3.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
      <iframe v-else-if="num=='4'" id="test" ref="html_test" src="/测试布局.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
      <iframe v-else id="test" ref="html_test" src="/test2.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
    </div>
  </div>
</template>

<script>
setTimeout(function () {
  document.getElementById("h1").style.display = "none";
}, 1500);
export default {
  name: "html_test",
  components: {},
  created() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      num: "",
    };
  },
  methods: {
    init() {
      console.log("init");
      let query = this.$route.query;
      console.log(query);
      this.num = query.str;
    },
  },
};
</script>

<style scoped >
.hello {
  width: 100%;

  height: calc(100% - 32px);
  display: flex;
  flex-wrap: wrap;
}
.iframe_box {
  width: 100%;
  height: 100%;
}
</style>
